<template>
    <div class="page">
        <a-form class="form">
            <a-range-picker class="mar-r10" size="small" style="width: 238px;height: 32px"
                v-model:value="tableQuery.rangeTime" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" picker="date"
                allowClear />
            <lo-select class="mar-r10 w100" v-model:value="tableQuery.batchType" placeholder="任务类型">
                <a-select-option value="00">转账</a-select-option>
                <a-select-option value="01">提现</a-select-option>
            </lo-select>
            <lo-select class="mar-r10 w100" v-model:value="tableQuery.checkStatus" placeholder="审核状态">
                <a-select-option value="00">未审核</a-select-option>
                <a-select-option value="01">通过</a-select-option>
                <a-select-option value="02">拒绝</a-select-option>
            </lo-select>
            <a-input class="form-item" v-model:value="tableQuery.keyWord" placeholder="关键词搜索"></a-input>
            <a-button class="form-btn" @click="pageChange(1)" type="primary">查询</a-button>
        </a-form>
        <div class="page_content flex-column">
            <div class="flex-1">
                <table-container v-slot="{ containerHeight }">
                    <lo-table :columns="tableColmun" :dataSource="tableData" :height="containerHeight">
                        <template #bodyCell="{ column, record }">
                            <template v-if="column.dataIndex == 'op'">
                                <lo-button @click="auditTask('show', record)" class="mar-r10" size="small" color="primary">查看明细</lo-button>
                                <lo-button v-if="record.checkStatus != '01'" @click="auditTask('audit', record)" class="mar-r10" size="small" color="primary">审核</lo-button>
                            </template>
                            <div v-if="column.dataIndex == 'checkStatus'">
                                <p v-if="record.checkStatus == '00'">未审核</p>
                                <p v-if="record.checkStatus == '01'">已审核</p>
                                <p v-if="record.checkStatus == '02'">审核拒绝</p>
                                <p class="fs12 color-666" v-if="record.createSysUserId">{{ record.checkUserName }} - {{ record.FCheckTime }}</p>
                            </div>
                            <template v-if="column.dataIndex == 'FBatchType'">
                                <span v-if="record.FBatchType == '00'">转账</span>
                                <span v-if="record.FBatchType == '01'">提现</span>
                            </template>
                            <template v-if="column.dataIndex == 'FAutoWithDraw'">
                                <span v-if="record.FAutoWithDraw == '00'">否</span>
                                <span v-if="record.FAutoWithDraw == '01'">是</span>
                            </template>
                            <template v-if="column.dataIndex == 'opStatus'">
                                <p class="flex color-green">
                                    <span class="flex-1">成功：{{ record.successCnt }}笔 / {{ record.successAmount }}元</span>
                                </p>
                                <p class="flex color-red">
                                    <span class="flex-1">失败：{{ record.failCnt }}笔 / {{ record.failAmount }}元</span>
                                </p>
                            </template>
                            <template v-if="column.dataIndex == 'allAmount'">
                                <!-- <p class="flex-1">{{ record.totalCnt }}条</p> -->
                                <p>{{ record.totalCnt }}笔 / {{ record.allAmount }}元</p>

                            </template>
                        </template>
                    </lo-table>
                </table-container>
            </div>
            <div class="pager">
                <a-pagination @change="pageChange" v-model:current="tablePager.index" :pageSize="tablePager.size"
                    :total="tablePager.total" :showSizeChanger="false" />
            </div>
        </div>





        <lo-modal title="任务明细" width="900px" ref="transDetailsRef"
            :showButton="showDetailType == 'audit'"
            @confirm="auditTask('confirm')">
            <div class="pad10">
                <div class="flex mar-b10">
                    <div class="flex-1">任务名称：{{ actTransItem.batchName }}</div>
                    <div class="flex-1">任务类型：
                        <span v-if="actTransItem.FBatchType == '00'">转账</span>
                        <span v-if="actTransItem.FBatchType == '01'">提现</span>
                    </div>
                    <div class="flex-1">时间：{{ actTransItem.createTime }}</div>
                </div>
                <div class="flex mar-b10">
                    <div class="flex-1">转出账户名：{{ actTransItem.outAccountName }}</div>
                    <div class="flex-1">转出账户：{{ actTransItem.outAccountNo }}</div>
                    <div class="flex-1"></div>
                </div>
                <a-form v-if="showDetailType == 'audit'" :label-col="{ style: { width: '110px' } }">
                    <div class="flex">
                        <a-form-item class="flex-1  mar-r20" label="审核：">
                            <a-radio-group class="pad-l10"
                                v-model:value="auditInfo.checkStatus" name="radioGroup">
                                <a-radio value="01">通过</a-radio>
                                <a-radio value="02">拒绝</a-radio>
                            </a-radio-group>
                        </a-form-item>
                        <a-form-item class="flex-1" label="短信验证码：">
                            <a-input v-model:value="auditInfo.code" placeholder="短信验证码" />
                        </a-form-item>
                    </div>
                    <div class="flex">
                        <a-form-item class="flex-1" label="备注：">
                            <a-input v-model:value="auditInfo.checkRemark" placeholder="备注" />
                        </a-form-item>
                    </div>
                </a-form>
                <lo-table
                    :columns="transDetailColmun"
                    :dataSource="transDetailList"
                    :height="300">
                </lo-table>
                <div class="pager">
                    <a-pagination @change="detailPageChange" v-model:current="detailTablePager.index" :pageSize="detailTablePager.size"
                        :total="detailTablePager.total" :showSizeChanger="false" />
                </div>

            </div>
        </lo-modal>

    </div>
</template>

<script lang="jsx" setup>
import { ref, onMounted, onActivated, nextTick } from 'vue'
import { getBatchTransHis, getTransOrders, checkTransBatch } from '@/api/system'
import md5 from 'js-md5'
import { useStore } from 'vuex'
const Store = useStore()

// onMounted(() => {
//     getList()
// })

onActivated(() => {
    getList()
})


// ************ account list ************
const tableQuery = ref({
    rangeTime: [],
    checkStatus: '',
    orderNo: '',
    batchNo: '',
    keyWord: '',
    batchType: '', //00转账，01提现
})
const tableColmun = ref([
    { title: '序号', type: 'index', },
    { title: '批次号', dataIndex: 'FBatchNo', width: '120px' },
    { title: '转出账户名', dataIndex: 'outAccountName', width: '120px' },
    { title: '转出账户', dataIndex: 'outAccountNo', width: '160px' },
    { title: '总计条数/金额', dataIndex: 'allAmount', width: '130px' },
    // { title: '总条数', dataIndex: 'totalCnt', width: '70px' },
    { title: '任务状态', dataIndex: 'opStatus', width: '200px' },
    { title: '审核状态', dataIndex: 'checkStatus', width: '120px' },
    { title: '创建时间', dataIndex: 'createTime', width: '160px' },
    { title: '任务类型', dataIndex: 'FBatchType', width: '90px' },
    { title: '自动提现', dataIndex: 'FAutoWithDraw', width: '90px' },
    { title: '操作', dataIndex: 'op', width: '180px' },
])
const tablePager = ref({
    index: 1,
    total: 0,
    size: 30
})
const tableData = ref([])
function pageChange(e) {
    tablePager.value.index = e
    setTimeout(getList)
}
function getList() {
    getBatchTransHis({
        startTime: tableQuery.value.rangeTime[0] || '',
        endTime: tableQuery.value.rangeTime[1] || '',
        batchType: tableQuery.value.batchType,
        checkStatus: tableQuery.value.checkStatus,
        keyWord: tableQuery.value.keyWord,
        pageIndex: tablePager.value.index,
        pageSize: tablePager.value.size
    }).then(res => {
        tableData.value = res.data.data.list
        tablePager.value.total = +res.data.data.total
    })
}





const transDetailsRef = ref(null)
const actTransItem = ref({})
const showDetailType = ref('')
const auditInfo = ref({ })
function auditTask(type, row) {
    if (type == 'show' || type == 'audit') {
        showDetailType.value = type
        transDetailsRef.value.open()
        actTransItem.value = row
        detailPageChange(1)
        if(type == 'audit') {
            auditInfo.value = {
                code: '',
                checkRemark: '',
                checkStatus: '01'
            }
        }
    } else if (type == 'close') {
        transDetailsRef.value.close()
    } else if (type == 'confirm') {
        if(!auditInfo.value.code) return $global.message.warning('请输入短信验证码')
        if(auditInfo.value.checkStatus == '02' && !auditInfo.value.checkRemark) return $global.message.warning('请输入拒绝原因')
        checkTransBatch({
            code: auditInfo.value.code,
            checkStatus: auditInfo.value.checkStatus,
            checkRemark: auditInfo.value.checkRemark,
            id: actTransItem.value.id
        }).then(res => {
            $global.message.success(res.msg)
            auditTask('close')
            pageChange(1)
        })
    }
}








const detailTablePager = ref({
    index: 1,
    total: 0,
    size: 30
})
const transDetailList = ref([])
const transDetailColmun = ref([
    { title: '序号', type: 'index', },
    { title: '订单号', dataIndex: 'orderNo', width: '150px' },
    { title: '转入账户名', dataIndex: 'inAccountName', width: '120px' },
    { title: '转入账户', dataIndex: 'inAccountNo', width: '180px' },
    { title: '金额', dataIndex: 'transAmount', width: '80px' },
    { title: '银行备注', dataIndex: 'payRemark', ellipsis: true},
    { title: '备注', dataIndex: 'orderRemark', ellipsis: true },
])
function detailPageChange(e) {
    detailTablePager.value.index = e
    setTimeout(getDetailList)
}
const getDetailList = (row) => {
    getTransOrders({
        batchNo: actTransItem.value.FBatchNo,
        pageIndex: detailTablePager.value.index,
        pageSize: detailTablePager.value.size
    }).then(res => {
        transDetailList.value = res.data.data.list
        transDetailList.value.total = +res.data.data.total
    })

}

</script>

<style lang="less" scoped></style>
